import React, { useCallback, useEffect } from 'react';
import { Link, useNavigate } from 'react-router-dom';
import SvgIcon from '@/components/SvgIcon/SvgIcon';
import consult from '@/assets/images/consult-fast.png';
import NavBar from '@/components/NavBar/NavBar';
import { RightOutline } from 'antd-mobile-icons';
import { useEnhanceDispatch, useEnhanceSelector } from '@/hooks';
import { setIllnessType } from '@/store/modules/consultStore';
import './ConsultFast.scss';

const ConsultFast = () => {
  const enhanceDispatch = useEnhanceDispatch();

  const navigate = useNavigate();

  // 左边插槽内容
  const left = useCallback(() => (<span>返回</span>), []);
  // 中间插槽内容
  const children = useCallback(() => (<span>极速问诊</span>), []);
  // 右边插槽内容
  const right = useCallback(() => (<Link to="/">问诊记录</Link>), []);

  /**
   *第二步：用于跳转到科室列表并且记录当前的极速问诊类型
   * */
  const goToDepartment = (illnessType: 0 | 1) => {
    enhanceDispatch(setIllnessType(illnessType));
    navigate('/department');
  };


  return (
    <div className="consult-fast">
      {/*导航栏组件*/}
      <NavBar back={left()} children={children()} right={right()} onBack={() => navigate(-1)}></NavBar>
      <div className="fast-logo">
        <img className="img" src={consult} alt="" />
        <p className="text"><span>20s</span> 快速匹配专业医生</p>
      </div>
      <div className="fast-type">
        <a className="item" onClick={() => goToDepartment(1)}>
          <SvgIcon name="doctor" width="30px" height="30px"></SvgIcon>
          <div className="info">
            <p>三甲图文问诊</p>
            <p>三甲主治及以上级别医生</p>
          </div>
          <RightOutline />
        </a>
        <a className="item" onClick={() => goToDepartment(0)}>
          <SvgIcon name="message" width="30px" height="30px"></SvgIcon>
          <div className="info">
            <p>普通图文问诊</p>
            <p>二甲主治及以上级别医生</p>
          </div>
          <RightOutline />
        </a>
      </div>
    </div>
  );
};

export default ConsultFast;